<template>
  <div class="container">
    <div class="flex-row tab-area">
      <div ref="imgTab" class="tab" @click="clickTab($event, 'image')">图片</div>
      <div class="tab" @click="clickTab($event, 'voice')">音频</div>
      <div class="tab" @click="clickTab($event, 'video')">视频</div>
    </div>
    <div class="tab-line"></div>
    
    <div class="content">
      <div class="flex-row head">
        <div class="head-title">图片（共25条）</div>
        <div class="flex-row upload-area">
          <div class="upload" @click="clickUpload">上传</div>
          <input ref="upload" class="upload-input" type="file" name="file" 
            @change="uploadedFile($event)"
            accept="*.*">
        </div>
      </div>

      <div class="flex-row items">
        <div class="flex-column item" v-for="(item, index) in data.items">
          <img v-if="item.url!='none' && item.url!=''" :src="item.url" class="item-img"/>
          <div v-if="(item.url=='none' || item.url=='') && data.tab=='video'" class="item-img">处理中</div>
          <div class="item-text" :placeholder="item.name">{{ item.name }}</div>
        </div>
      </div>
      <div class="flex-row page">
        <pagination
          v-show="data.total > 0"
          :total="data.total"
          v-model:page="data.pageNum"
          v-model:limit="data.pageSize"
          @pagination="getList"/>
      </div>
    </div>
    <div v-if="data.showVideo">
      <div class="mask"></div>
      <div class="flex-column video-dialog">

        <div class="flex-row field">
          <div class="label">上传视频</div>
          <div class="flex-column value">
            <div class="value-hint">请上传时长小于1小时的视频，支持主流的 视频格式 ，超出限制的视频请到腾讯视频上传</div>
            <div class="upload" @click="clickVideoUpload">上传视频</div>
            <div class="value-hint">{{ videoData.videoPath }}</div>
            <input ref="videoUpload" class="upload-input" type="file" name="file" 
              @change="uploadedVideoFile($event)"
              accept="*.*">
          </div>
        </div>
        <div class="flex-row field">
          <div class="label">标题</div>
          <div class="value">
            <div class="value-input">
              <el-input v-model="videoData.videoTitle" style="width: 480px"
                maxlength="64" show-word-limit type="text"/>
            </div>
            <div class="value-hint">此标题为素材标题，后续群发时可设置新标题，保存后不可修改。建议填写清晰、准确的标题</div>
          </div>
        </div>
        <div class="flex-row field">
          <div class="label">简介</div>
          <div class="value">
            <div class="value-input">
              <el-input v-model="videoData.videoDesc" style="width: 480px"
                maxlength="255" show-word-limit :rows="4" type="textarea"/>
            </div>
          </div>
        </div>
        <div class="flex-row op-btns">
          <div class="save" @click="save">保存</div>
          <div class="cancel" @click="cancel">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="MaterialIndex">
import { api, apiQueryAndHeader } from "@/api/wechat/public"

const { proxy } = getCurrentInstance()

const upload = ref()
const videoUpload = ref()

const imgTab = ref()
const prevTab = ref(null)
const curTab = ref(null)
const data = ref({tab:'photo', items:[],
total:25, pageNum: 1, pageSize: 10, showVideo: false
})

const videoForm = ref()
const videoData = ref({videoTitle:'', videoDesc:'', videoPath: ''})

async function getList(){
  const params = {apiKey: 'batchget_material', body: {
    type: data.value.tab,
    offset: (data.value.pageNum-1)*data.value.pageSize,
    count: data.value.pageSize
  }}

  await api(params).then(res => {
    data.value.total = res.data.total_count
    data.value.items = res.data.item
  })
}

async function clickTab(event, tab){
  if(curTab.value){
    prevTab.value = curTab.value
  }

  data.value.tab = tab

  curTab.value = event.currentTarget
  
  event.currentTarget.style.borderBottomStyle = 'solid'
  event.currentTarget.style.color = '#07C160'

  if(prevTab.value){
    prevTab.value.style.borderBottomStyle = 'none'
    prevTab.value.style.color = '#000000'
  }

  await getList()
}

onMounted(() => {  
  nextTick(() => {
    let event = {currentTarget: imgTab.value}
    clickTab(event, 'image')
  })
})

async function clickUpload(){
  if(data.value.tab == 'video'){
    videoData.value.videoTitle = ''
    videoData.value.videoDesc = ''
    videoData.value.videoPath = ''
    data.value.showVideo = true
    return
  }

  upload.value.click()
}

async function uploadedFile(event) {
  if (event.target.files[0].size > this.size * 1024) {
      proxy.$modal.msgError('超过文件大小限制')
      return
    }

    let formData = new FormData()
    formData.append("file", event.target.files[0])
    let querys = "apiKey=add_material&type=image"
    let headers = {
      'Content-Type': 'multipart/form-data'
    }

    await apiQueryAndHeader(formData, querys, headers)

    await getList()
}

function clickVideoUpload(){
  videoUpload.value.click()
}

async function uploadedVideoFile(event){
  if (event.target.files[0].size > this.size * 1024) {
      proxy.$modal.msgError('超过文件大小限制')
      return
    }
    videoData.value.videoPath = event.target.files[0].name

    videoForm.value = new FormData()
    videoForm.value.append("file", event.target.files[0])
}

async function save(){
  let querys = "apiKey=add_material&type=video"
  let headers = {
    'Content-Type': 'multipart/form-data'
  }
  
  videoForm.value.append("title", videoData.value.videoTitle)
  videoForm.value.append("desc", videoData.value.videoDesc)

  await apiQueryAndHeader(videoForm.value, querys, headers)

  await getList()

  data.value.showVideo = false
}

function cancel(){
  data.value.showVideo = false
}

</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  width: 100%;
  background-color: #eeeeee;

  justify-content: center;

  .title {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 20px;
  }

  .tab-area {
    width: 100%;
    gap: 40px;

    .tab {
      font-size: 16px;
      padding-bottom: 10px;
      border-bottom-style: none;
      border-bottom-color: #07C160;
    }

    .tab:hover {
      cursor: pointer;
      color: #07C160;
    }
  }

  .tab-line {
    margin-top: -1px;
    height: 1px;
    background-color: #dddddd;
  }

  .content {
    margin-top: 20px;
    background-color: #ffffff;
    width: 100%;
    padding: 20px;
    border-radius: 10px;

    .head {
      justify-content: space-between;

      .head-title {
        font-size: 18px;
        font-weight: 400;
      }

      .upload {
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #07C160;
        border-radius: 5px;
        color: #ffffff;
        font-size: 14px;

        justify-content: center;
        align-items: center;

        &:hover {
          cursor: pointer;
          background-color: #05a14a;
        }
      }
    }

    .items {
      flex-wrap: wrap;
      gap: 20px;

      .item {
        margin-top: 20px;
        gap: 10px;
      }
      .item-img {
        width: 130px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        border-radius: 5px;
        border-style:solid;
        border-color: #eeeeee;
        border-width: 1px;
      }
      .item-text {
        width: 130px;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }
    }

    .page {
      justify-content: flex-end;
    }

    .upload-input {
      opacity: 0;
      width: 0px;
      height: 0px;
    }
  }

  .upload-area {
    justify-content: flex-end;
  }

  .mask {
    background-color: #000000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .video-dialog {
    position: fixed;
    z-index: 2;
    top: calc(50% - 150px);
    left: calc(50% - 300px);
    background-color: #ffffff;
    padding: 40px;
    gap: 20px;
    align-items: flex-start;
    border-radius: 10px;

    .field {
      align-items: flex-start;
      
      .label {
        width: 120px;
      }

      .value {
        align-items: flex-start;
        gap: 10px;

        .value-hint {
          font-size: 16px;
          color: #7e8081;
        }
      }
    }

    .upload {
      background-color: #07C160;
      width: 80px;
      height: 30px;
      line-height: 30px;
      user-select: none;
      text-align: center;
      color: #ffffff;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
    }

    .upload-input {
      opacity: 0;
      width: 0px;
      height: 0px;
    }

    .op-btns {
      justify-content: center;
      justify-items: center;
      align-items: center;
      width: 100%;
      gap: 20px;
      margin-top: 40px;

      .save {
        background-color: #07C160;
        width: 80px;
        height: 30px;
        line-height: 30px;
        user-select: none;
        text-align: center;
        color: #ffffff;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
      }

      .cancel {
        background-color: #eeeeee;
        width: 80px;
        height: 30px;
        line-height: 30px;
        user-select: none;
        text-align: center;
        color: #000000;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
}
</style>